<template>
  <div class="shop-container">
    <el-card>
      <div class="search-box">
        <el-input v-model="search" placeholder="请输入商品名称" />
        <el-button type="primary" icon="Search" @click="searchShop">搜索</el-button>
      </div>
      <div class="shop-list">
        <div class="shop-item" v-for="item in shopList" :key="item.id">
          <img :src="item.img" alt="商品图片" />
          <div class="shop-item-info">
            <h4>{{ item.name }}</h4>
            <p>{{ item.description }}</p>
            <p>￥ {{ parseFloat(item.price).toFixed() }} 元</p>
          </div>
        </div>
      </div>
      <div class="pagination-box">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <Footer></Footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import https from "@/utils/https";
import Footer from "@/components/reuse/footer.vue";
const background = ref(true);
// 当前页
const currentPage = ref<number | string>(2);
// 每页条数
const pageSize = ref<number | string>(10);
// 总条数
const total = ref<number>(0);
// 搜索
const search = ref("");
//  商品列表
const shopList = ref([]);
// 获取商品列表
const getShopList = async () => {
  try {
    const res = await https.get("/shop", {
      params: {
        currentPage: currentPage.value,
        pageSize: pageSize.value,
      },
    });

    if (res.code === 200) {
      shopList.value = res.data.list;
      total.value = res.data.total;
      pageSize.value = res.data.pageSize;
      currentPage.value = res.data.currentPage;
    }
  } catch (error) {
    console.error("获取商品列表失败:", error);
  }
};
// 处理每页条数变化
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  getShopList();
};
// 处理当前页变化
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  getShopList();
};
// 搜索
const searchShop = () => {
  search.value = "123";
};
onMounted(() => {
  getShopList();
});
</script>

<style scoped>
.shop-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.search-box .el-input {
  width: 15%;
}
.shop-list {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.shop-item {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #a65757;
  border-radius: 10px;
  margin-left: 26px;
  margin-bottom: 10px;
  padding: 20px;
  box-sizing: border-box;
}
.shop-item:hover {
  transform: scale(1.05);
  transition: transform 0.5s;
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.845);
  cursor: pointer;
}
.shop-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-item img:hover {
  transform: scale(1.05);
  transition: transform 0.5s;
}
.shop-item-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.shop-item-info h4 {
  padding-top: 5px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: bold;
}
.shop-item-info p {
  font-size: 15px;
  margin: 0;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-item-info p:nth-child(2) {
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #666;
}
.shop-item-info p:last-child {
  font-size: 15px;
  color: #f92a2a;
}
.pagination-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
